<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式属性</title>
		<style>
			{
				font-family: 微软字体,sans-serif;
				font-size: 1.5em;
				/* 字体加粗属性 */
				font-weight:800;
				
				font-style: italic;
				text-transform: uppercase;
				text-transform: lowercase;
				text-transform: capitalize;
				/*  首行缩进属性 */
				text-indent: 200px;}
				h1+p{
					bord er: 1px solid red;
					text-align: justify;
					height: 40px;
					line-height: 40px;
					letter-spacing: 2px;
					word-spacing: 10px;
				}
				div a{
								border: 1px solid #ccc;
								padding: 8px;
								margin-left: 5px;
							}
				div a.current{
					border: 0;
					color: #000;
					text-decoration: none;
				}			
				div p{
					text-shadow: 5px  5px 10px #137dff;
				}
							div>span{
								/* white-space文本换行属性：nowrap 不换行
														   pre 保留空格与换行
														   normal 默认、空格合并，自动换行，回车不管
								 */
								border: 1px solid red;
								white-space: nowrap;
								white-space: pre;
								white-space: normal;
							}
			
			
		</style>
	</head>
	<body>
		<!-- 文本格式化属性：页面上文本或者文字
		 4种用途①控制字体：font-family,font-size,font-weight
		       ②控制文本布局：text-align,line-height,letter-spacing等
			   ③处理文本溢出：overflow,white-space等-->
			   <h1> 控制字体属性：font-family，font-size></h1>
			   Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel accusantium maiores quaerat itaque. Placeat iusto vel ipsam nulla sit minima officia, sapiente laborum cupiditate officiis, nam magni dolores neque corrupti!
			   <h1>控制文本布局：text-algin</h1>
			   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius ipsa expedita asperiores cum quod architecto corporis doloremque ad nam, rerum porro quo adipisci tempora tempore provident. In minus ut asperiores!</p >
			   <h1>w文本装饰效果</h1>
			   <div>
				   <a href=" " class="current">1</a >
				   <a href="#">2</a >
				   <a href="#">3</a >
				   <a href="#">4</a >
				   <a href="#">5</a >
				   <p>文本阴影效果</p >
			   </div>
			   <h1>处理文本溢出与换行</h1>
			   <div>
				   <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam ratione beatae consectetur itaque accusamus, consequatur suscipit recusandae quae officia autem. Sed beatae soluta illo quaerat aut. Nulla consequatur dolor mollitia!</span>
			   </div>
	</body>
</html>